@import "../style/index.scss";

.workspaces-layout {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--surface);
  color: var(--gray-base);
  flex: 1;

  .amp-page-layout,
  .amp-outer-page-layout {
    max-width: 100vw;
  }

  &--with-side-panel {
    .amp-page-layout,
    .amp-outer-page-layout {
      max-width: calc(100vw - var(--changes-menu-width) - 2px);
    }
  }

  &__page_content {
    display: flex;
    flex: 1;
    overflow: hidden;
  }

  &__main_content {
    flex: 1;
    display: flex;
  }

  &__assistant__wrapper {
    width: 100vw;
    height: 100vh;
    display: flex;
  }
  &__assistant {
    background: var(--menu-background-color);
    border-right: $border-dark;
    display: flex;
    flex-direction: column;
    background-color: var(--gray-full);
  }

  &__changes_menu {
    width: var(--changes-menu-width);
    min-width: var(--changes-menu-width);
    background: var(--menu-background-color);
    border-left: $border-dark;
    display: flex;
    flex-direction: column;
    background-color: var(--gray-full);
  }
}
